<template>
  <div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="800px" @close="resetForm('addForm')">
      <el-form :model="form" status-icon :rules="rules" ref="addForm">
        <el-form-item label="项目名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目代码" :label-width="formLabelWidth" prop="code">
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目金额" :label-width="formLabelWidth" prop="money">
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开标地点" :label-width="formLabelWidth" prop="location">
          <el-input v-model="form.location" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开标时间" :label-width="formLabelWidth" prop="date">
          <el-date-picker v-model="form.date" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择开标日期及时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // import { saveProject } from "@/api/project"
  export default {
    data() {
      return {
        dialogFormVisible: false,
        dialogTitle: "",
        form: {},
        formLabelWidth: '80px',
        rules: {
          name: [{
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          }],
          code: [{
            required: true,
            message: '请输入项目代码',
            trigger: 'blur'
          }],
          money: [{
            required: true,
            message: '请输入项目金额',
            trigger: 'blur'
          }, {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,3})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输入正确格式的数值,可保留三位小数'
          }],
          date: [{
            required: true,
            message: '请选择开标时间',
            trigger: 'blur'
          }],
          location: [{
            required: true,
            message: '请输入开标地点',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.$bus.$on('addProjectDialog', () => {
        this.initAdd()
        this.dialogTitle = '添加项目'
      });

      this.$bus.$on('editProjectDialog', (data) => {
        this.initEdit(data);
        this.dialogTitle = "修改项目信息"
      })
    },
    beforeDestroy() {
      this.$bus.$off('addProjectDialog')
      this.$bus.$off('editProjectDialog')
    },
    methods: {
      initAdd() {
        this.dialogFormVisible = true;
        this.form = {
          name: '',
          code: '',
          money: '',
          location: '',
          date: ''
        }
      },
      initEdit(data){
        this.dialogFormVisible = true;
        this.form = {...data};
        this.form.date = new Date(this.form.date); //字符串格式化成时间格式，不然会报错
        // console.log(this.form)
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.form.date = this.$moment(this.form.date).format('YYYY-MM-DD HH:mm:ss'); //再转成字符串格式。。。
            // saveProject(this.form).then(res => {
            //   // console.log(res)
            //   this.dialogFormVisible = false;
            //   this.$message({
            //     message: "操作成功！",
            //     type: "success"
            //   });
            //   this.$bus.$emit("onSaveProject");
            //   this.resetForm(formName)
            // }).catch(e => {
            //   console.log("error", e)
            // })
          } else {
            console.log(this.form);
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>
</style>
